<template>
  <div class="bottomleft pad15  hei00 box flex col">
    <div class="flex_middle titles pad_l5">
      <dv-decoration-6 style="width:45px; height: 20px;" />
      <div class="mar_l10">城市技术人员分布</div>
    </div>
    <div class="concent flex1 hei00 ">
      <div class="pre" id="main_three"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
let myChart = null;
export default {
  mounted() {
    this.onepie();
  },
  methods: {
    onepie() {
      var chartDom = document.getElementById('main_three');
      myChart = echarts.init(chartDom);
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['20-30岁','30岁以上'],
          textStyle: {
            color: '#fff'
          },
          bottom: '1%'
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: ['北京','西安','上海','深圳','南京','邢台','郑州','宝鸡'],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            splitLine:{
              show:false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            splitLine:{
              show:false
            }
          }
        ],
        grid: {
          left: 20,
          right: 20,
          bottom: 35,
          containLabel: true
        },
        series: [
          {
            name: '20-30岁',
            type: 'bar',
            data: [72, 58, 89, 75, 25, 48, 48, 25],
            markPoint: {},
            itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{  
            // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
            // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                offset: 0,
                color: '#32c5e9'
                }, {
                  offset: 1,
                  color: '#31b7c8'
                }]),
              }
            },
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            }
          },
          {
            name: '30岁以上',
            type: 'bar',
            data: [48, 30, 48, 30, 48, 48, 39, 37],
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            },
            markPoint: {},
            itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{  
            // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
            // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                offset: 0,
                color: '#008aff'
                }, {
                  offset: 1,
                  color: '#96bfff'
                }]),
              }
            },
          }
        ]
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.bottomleft {
  .concent {
    .pre {
      width: 100%;
      height: 100%;
    }
  }
  .titles {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
  }
}
</style>
